<template>
  <view class="custom-nav">
    <view class="nav-bg" :class="bgClass" v-if="theme">
      <view class="bg-con"></view>
    </view>
    <uni-nav-bar leftWidth="200rpx" rightWidth="200rpx" height="88rpx" :border="false" backgroundColor="transparent" fixed statusBar @clickLeft="clickLeftFn">
      <view class="nav-title" v-if="theme != 'blue'">{{ title }}</view>
      <template #left>
        <template v-if="leftIcon">
          <view class="nav-left" v-if="leftIcon == 'search'" @click="toSearch">
            <text>精准查找</text>
          </view>
          <view class="nav-left" v-else-if="leftIcon == 'home'">
            <image class="nav-home" src="@/static/common/home.svg" alt="404"></image>
          </view>
        </template>
        <template v-else-if="isLeft">
          <image :src="backIcon" mode="scaleToFill" style="width: 60rpx; height: 60rpx" v-if="iconType == 'circle'"></image>
          <uni-icons type="left" size="22" color="#323333" v-else></uni-icons>
        </template>
        <template v-else>
          <slot></slot>
        </template>
      </template>
    </uni-nav-bar>

    <!-- popup弹窗 -->
    <custom-popup v-if="isPopup"></custom-popup>

  </view>
</template>

<script setup>
import backIcon from "@/static/common/back-round.svg";
import { getItem } from "@/utils/storage";
import useStore from "@/store";
const { app, common } = useStore();
const props = defineProps({
  title: {
    type: String,
    default: "完美繁花",
  },
  leftIcon: {
    type: String,
    default: "",
  },
  theme: {
    //  primary: 金色背景， blue：蓝色背景，white：无背景
    type: String,
    default: "",
  },
  isCustomBack: {
    // 注册页面 - 自定义返回事件
    type: Boolean,
    default: false,
  },
  isPopup: {
    // 是否默认展示在nav中
    type: Boolean,
    default: true,
  },
  iconType: {
    //  primary: 金色背景， blue：蓝色背景，white：无背景
    type: String,
    default: "",
  },
  shadow: {
    type: Boolean,
    default: false,
  },
});

const isLeft = ref(false);

const emits = defineEmits(["back"]);
const bgClass = computed(() => {
  const themes = {
    primary: "primary-bg",
    blue: "blue-bg",
    red: "red-bg",
  };
  return themes[props.theme];
});

const clickLeftFn = () => {
  const flag = common.isPopupOpen;
  if (flag) return;
  const { appLogin, phone } = getItem("user_info") || {};
  if (props.leftIcon == "search") {
    if (!appLogin) {
      uni.navigateTo({ url: "/subPages/register/index" });
      return;
    }
    if (!phone) {
      uni.navigateTo({ url: "/subPages/register/contact" });
      return;
    }
    uni.navigateTo({ url: "/subPages/search/index" });
    return;
  }

  if (props.leftIcon == "home") {
    uni.reLaunch({ url: "/pages/launch/index" });
    return;
  }

  if (props.isCustomBack) {
    emits("back");
    return;
  }
  uni.navigateBack({ delta: 1 });
};

const getGift = async () => {
  let timer = null;
  const g = getItem("initGiftStatus");

  if (g) {
    timer = setTimeout(() => {
      common.updatePopupOpen(true, "gift");
    }, 500);
  }

  if (!g) {
    clearTimeout(timer);
  }
};

onShow(() => {
  const len = getCurrentPages()?.length;
  isLeft.value = len > 1;

  const path = getCurrentPages()[len - 1].route;
  const fPage = path.includes("purchase");
  if (!fPage) {
    common.updatePopupOpen(false);
  }

  // 注册完成手机号后 - 赠送次数
  getGift();
});
</script>

<style lang="scss" scoped>
.custom-nav {
  position: relative;
}
.nav-bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100vw;
  height: 440rpx;
  .bg-con {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}

.primary-bg {
  background: linear-gradient(90deg, #fce9e0 0%, #fff7ef 53%, #fff6de 100%);
  .bg-con {
    background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 100%);
  }
}

.blue-bg {
  height: 1200rpx;
  background: linear-gradient(135deg, #1f3bff 0%, #339dff 100%);
  .bg-con {
    height: 50%;
    background: linear-gradient(180deg, rgba(241, 245, 254, 0) 46%, #f1f5fe 100%);
  }
}
.red-bg {
  height: 1200rpx;
  background: linear-gradient(90deg, #ff2c2c 0%, #ff602c 100%);
  .bg-con {
    height: 50%;
    background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #fff6f6 100%);
  }
}
.nav-title {
  font-size: 36rpx;
  color: $uni-title-color;
  line-height: 88rpx;
  font-weight: bold;
  text-align: center;
  width: 100%;
}
.nav-left {
  @include flexAlignCenter;
  font-size: 32rpx;
  color: $uni-title-color;
  font-weight: 500;
  position: relative;
  z-index: -10;
  .pic-404__parent {
    width: 40rpx;
  }
}

.nav-home {
  width: 60rpx;
  height: 60rpx;
}
</style>
